<template>
  <div class="cdiv">
    <video style="width: 100%;z-index: 0;position: absolute;
      object-fit: cover;background-color: #1a1a1a;
      margin: 0;top: 0;
      height: 890px"
           loop muted autoplay
           :src="imgUrl"
           :controls="false"
           ref="myVideo"
           controls type="video/mp4">
    </video>
  </div>
  <div class="zdiv">
    <el-container style="width :100%;height: auto;margin: 0 auto">
      <el-main style="padding: 0px;overflow: hidden;">
        <el-card
            style="width: 733px;height: auto;margin: 0 auto;margin-right: 5%;background-color: rgba(255,255,255,0);border: 0">
          <!--          <el-row :gutter="24" style="padding: 0px">
                      <el-col :span="10" style=";padding: 38px 0 0;">
                        <el-header style="width: 100% ;height: auto;overflow: hidden;margin:0 auto" >
                          <div style="width: 100% ;height: auto;overflow: hidden;margin:0 auto">
                            <div style="font-weight: bold;text-align: center">打开知友圈App</div>
                            <div style="text-align: center;font-size: 16px;margin: 12px 0 24px 0" >在[我的主页]左上角打开扫一扫</div>
                            <div style="text-align: center;font-size: 16px;margin: 12px 0 24px 0" >欢迎登录知友圈</div>
                            <div style="margin: 0 auto;text-align: center">
                              <img src="/imgs/LoginAndReg/logo.png">
                            </div>
                          </div>
                        </el-header>
                        <el-main  style="height: auto;width: 115%;margin: 26px 0 22px;padding: 0px">
                          <div>
                            <el-row :gutter="1" >
                              <el-col :span="8.5">
                                <el-button class="e1" >
                                  下载知友圈App
                                </el-button>
                              </el-col>
                              <el-col :span="7" >
                                <el-button class="e1">
                                  开通机构号
                                </el-button>
                              </el-col>
                              <el-col :span="7" >
                                <el-button class="e1">
                                  无障碍模式
                                </el-button>
                              </el-col>
                            </el-row>
                          </div>
                        </el-main>
                      </el-col>
                      <el-col :span="14" style="width: 100%;padding: 0px">
                          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="验证码登录" name="third">
                              <div>
                                <el-form>
                                  <div class="c1" >
                                    <el-row :gutter="0" >
                                      <el-col :span="6">
                                        <el-select v-model="value" class="m-2" placeholder="" size="large"
                                        >
                                          <el-option
                                              v-for="item in options"
                                              :key="item.value"
                                              :label="item.label"
                                              :value="item.value"
                                          />
                                        </el-select>
                                      </el-col>
                                      <el-col :span="18">
                                        <div >
                                          <el-input type="text" placeholder="请输入电话号码" style="height: 40px;"/>
                                        </div>
                                      </el-col>
                                    </el-row>
                                  </div>
                                  <div class="d1" style="margin-top: 20px;">
                                    <el-input type="text" placeholder="请输入6位短信验证码" style="height: 40px"  >
                                    <template #append>
                                      <el-button><span class="s1">获取短信验证码</span></el-button>
                                    </template>
                                    </el-input>
                                  </div>
                                  <div style="margin-top: 8px;height: 20px">
                                    <span class="s2" style="float: right;margin-right: 16.5px;font-size: 15px;">获取语音验证码</span>
                                  </div>
                                  <div style="margin-top: 30px;padding: 0 16px">
                                    <el-button style="background-color: dodgerblue;padding: 8px 130px"><span><a href="" class="s2" style="text-decoration: none">登录或注册</a></span></el-button>
                                  </div>
                                </el-form>
                              </div>
                            </el-tab-pane>

                            <el-tab-pane label="密码登录" name="fourth">-->
          <el-form>
            <span style="font-weight: bolder;font-size: 30px">欢迎登陆知友圈</span><br>
            用户名:
            <el-input type="text" placeholder="用户名" style="height: 40px;margin-bottom: 20px"
                      v-model="user.username"></el-input>
            <sapn>密码:</sapn>
            <el-input type="password" placeholder="密码" v-model="user.password" style="height: 40px;margin-top: 10px;">
              <template #append>
                <el-icon>
                  <View/>
                </el-icon>
                <!--                          <el-icon><Hide /></el-icon>-->
              </template>
            </el-input>
            <div style="height: 20px;margin-top: 10px">
              <!--                        <span style="float: left;"><a class="s1" href="" style="text-decoration: none;">海外手机号登录</a></span>-->
              <span class="s2" style="float: right">忘记密码</span>
            </div>
            <el-button style="padding: 8px 110px;margin-top: 30px;margin-left: 35%;z-index: 3" @click="login()">
              <span><a class="s2" style="text-decoration: none">登录</a></span></el-button>
          </el-form>
          <!--                            </el-tab-pane>
                                    </el-tabs>
                                  <div class="separator"></div>
                                    <div style="height: 32px;padding-left: 120px">
                                      <el-button type="primary" :icon="ChatDotRound" circle="true" style="margin-right: 10px" />
                                      <el-button type="primary" circle="true" :icon="PictureRounded" style="margin-right: 10px "/>
                                      <el-button type="primary" circle="true" :icon="View"/>
                                    </div>
                                  <span style="float: left;font-size: 14px;font-weight: lighter;margin: 10px">未注册手机验证后自动登录，注册即代表同意《隐私保护指引》</span>
                                </el-col>
                              </el-row>-->
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>


<script setup>
import {ref} from "vue";
const imgUrl = ref("/video/login.mp4");
import {ChatDotRound, PictureRounded, View, Share, Upload} from '@element-plus/icons-vue';
import qs from "qs";
import {ElMessage} from "element-plus";
import axios from "axios";
import BASE_URL from "@/http/BaseUrl";

const user = ref({username: "", password: "", phone: ""})
const login = () => {
  let data = qs.stringify(user.value);
  axios.post(BASE_URL.PASSPORT+'/user/login', data).then((response) => {
    if (response.data.state === 200) {
      location.href = "/";
      localStorage.setItem('user', JSON.stringify(response.data.data))
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.message)
    }
  })
}

</script>
<style scoped>

.cdiv {
  height: 650px;
  width: 100%;
  /*  position: fixed;
    overflow: hidden;
    background-image: url('/public/imgs/LoginAndReg/background.jpg');!*设置背景图片为封面*!
    background-size: cover;
    background-position: center;!*设置背景图片居中*!
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: rgba(1, 1, 1, 0.94);*/
}

/*.s1{
  font-size: 15px;
  color: deepskyblue;
}
.s1:hover{
  color: gray;
}
.e1{
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 20px;
  margin-right: 8px;
}*/
.s2 {
  color: #454545;
  font-size: 15px;
}

.s2:hover {
  color: gray;
}

/*
.separator {
  position: relative;
  border-top: 1px solid gray;
  font-size: small;
  margin: 20px 0;
}

.separator::before {
  content: "其他方式";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #FFF;
  padding: 0 10px;
}
.demo-type {
  display: flex;
}
*/
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.zdiv {
  height: 450px;
  width: 100%;
  position: absolute;
  top: 25%;
  right: 25%;
}
</style>